<!--
 * hi-filter-tabs - 过滤器选项卡
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-filter-tabs" :class="_classes" :style="_styles">
        <!-- Left -->
        <view class="hi-filter-tabs__left">
            <scroll-view class="hi-filter-tabs__scroll" id="hifilter-tabsScrollView" scroll-x>
                <view class="hi-filter-tabs__scroll-content">
                    <view class="hi-filter-tabs__items">
                        <view
                            class="hi-filter-tabs__item hi-filter-tabs__item--left"
                            v-for="(_item, _index) in list"
                            :key="_index"
                            :class="[
                                {
                                    'hi-filter-tabs__item--active': values.includes(_item[valueName]),
                                    'hi-filter-tabs__item--disabled hi-disabled': _item?.disabled
                                },
                                values.includes(_item[valueName]) ? _item?.activeClasses : _item?.classes
                            ]"
                            :hover-class="hover"
                            @tap="_emits('itemClick', _item, _index)"
                            :style="[
                                values.includes(_item[valueName]) ? activeItemStyle : itemStyle,
                                values.includes(_item[valueName]) ? _item?.activeStyles : _item?.styles
                            ]"
                        >
                            <slot name="item" :item="_item" :index="_index">
                                <hi-icon
                                    class="hi-filter-tabs__item__icon hi-filter-tabs__item__icon--left"
                                    :name="values.includes(_item[valueName]) ? _item?.activeIcon || _item?.icon : _item?.icon"
                                    v-if="_item?.activeIcon || _item?.icon"
                                ></hi-icon>
                                <view class="hi-filter-tabs__item__text hi-filter-tabs__item__text--left" v-if="_item?.[keyName]">{{ _item[keyName] }}</view>
                            </slot>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <!-- Right -->
        <view class="hi-filter-tabs__right" v-if="right?.length">
            <slot name="right">
                <slot name="rightItem">
                    <view
                        class="hi-filter-tabs__item hi-filter-tabs__item--right"
                        :hover-class="hover"
                        v-for="(_item, _index) in right"
                        :key="_index"
                        :class="[{ 'hi-disabled': _item?.disabled }, _item?.classes]"
                        :style="_item?.styles"
                        @tap="_emits('rightClick', _item, _index)"
                    >
                        <view class="hi-filter-tabs__item__text hi-filter-tabs__item__text--right" v-if="_item?.[keyName]">{{ _item[keyName] }}</view>
                        <hi-icon class="hi-filter-tabs__item__icon hi-filter-tabs__item__icon--right" :name="_item?.icon" v-if="_item.icon"></hi-icon>
                    </view>
                </slot>
            </slot>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { ref, computed, onMounted, getCurrentInstance, watch, nextTick } from "vue";
    import props from "./props.js";
    import { isArray } from "../../functions";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["rightClick", "itemClick"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 等分布局
        if (_props.equal) classes.push(`hi-filter-tabs--equal`);

        // 两端对齐
        if (_props.justify) classes.push(`hi-filter-tabs--justify`);

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // 背景
        if (_props.bg) styles.push(`--hi-filter-tabs-background: ${_props.bg};`);

        // 圆角
        if (_props.radius) styles.push(`--hi-filter-tabs-border-radius: ${_props.radius};`);

        // 高
        if (_props.height) styles.push(`--hi-filter-tabs-height: ${_props.height};`);

        // 文字颜色
        if (_props.color) styles.push(`--hi-filter-tabs-color: ${_props.color};`);

        // 文字大小
        if (_props.fontSize) styles.push(`--hi-filter-tabs-font-size: ${_props.fontSize};`);

        // 文字粗细
        if (_props.fontWeight) styles.push(`--hi-filter-tabs-font-weight: ${_props.fontWeight};`);

        // 激活项文字颜色
        if (_props.activeColor) styles.push(`--hi-filter-tabs-active-color: ${_props.activeColor};`);

        // 激活项文字大小
        if (_props.activeFontSize) styles.push(`--hi-filter-tabs-active-font-size: ${_props.activeFontSize};`);

        // 激活项文字粗细
        if (_props.activeFontWeight) styles.push(`--hi-filter-tabs-active-font-weight: ${_props.activeFontWeight};`);

        // 选项之间的间距
        if (_props.gap) styles.push(`--hi-filter-tabs-items-gap: ${_props.gap};`);

        // 选项内边距
        if (_props.itemPadding) styles.push(`--hi-filter-tabs-item-padding: ${_props.itemPadding};`);

        // 图标颜色
        if (_props.iconColor) styles.push(`--hi-filter-tabs-item-icon-color: ${_props.iconColor};`);

        // 图标大小
        if (_props.iconSize) styles.push(`--hi-filter-tabs-item-icon-font-size: ${_props.iconSize};`);

        // 激活的图标颜色
        if (_props.activeIconColor) styles.push(`--hi-filter-tabs-item-active-icon-color: ${_props.activeIconColor};`);

        // 激活的图标大小
        if (_props.activeIconSize) styles.push(`--hi-filter-tabs-item-active-icon-font-size: ${_props.activeIconSize};`);

        // 选项背景
        if (_props.itemBg) styles.push(`--hi-filter-tabs-item-background: ${_props.itemBg};`);

        // 激活项背景
        if (_props.activeItemBg) styles.push(`--hi-filter-tabs-item-active-background: ${_props.activeItemBg};`);

        return styles;
    });

    // 选中项
    const values = computed(() => {
        if (isArray(_props.value)) return _props.value;
        return [_props.value];
    });
</script>

<style lang="scss" scoped>
    .hi-filter-tabs {
        background: var(--hi-filter-tabs-background, none);
        border-radius: var(--hi-filter-tabs-border-radius, 0);
        display: var(--hi-filter-tabs-display, flex);
        flex-direction: var(--hi-filter-tabs-flex-direction, row);
        align-items: var(--hi-filter-tabs-align-items, stretch);
        gap: var(--hi-filter-tabs-gap, 0);
        width: var(--hi-filter-tabs-width, 100%);
        height: var(--hi-filter-tabs-height, 3em);
        text-align: var(--hi-filter-tabs-text-align, center);
        color: var(--hi-filter-tabs-color, inherit);
        font-size: var(--hi-filter-tabs-font-size, inherit);
        font-weight: var(--hi-filter-tabs-font-weight, inherit);

        &__left {
            flex: var(--hi-filter-tabs-left-flex, 1);
            overflow: var(--hi-filter-tabs-left-overflow, hidden);
            position: var(--hi-filter-tabs-left-position, relative);
        }

        &__scroll {
            white-space: var(--hi-filter-tabs-scroll-white-space, nowrap);
            height: var(--hi-filter-tabs-scroll-height, 100%);

            &::-webkit-scrollbar,
            ::-webkit-scrollbar {
                display: none;
            }
        }

        &__scroll-content {
            height: var(--hi-filter-tabs-scroll-content-height, 100%);
            display: var(--hi-filter-tabs-scroll-content-display, flex);
            flex-wrap: var(--hi-filter-tabs-scroll-content-flex-wrap, nowrap);
            white-space: var(--hi-filter-tabs-scroll-content-white-space, nowrap);
            width: var(--hi-filter-tabs-scroll-content-width, 100%);
        }

        &__items {
            display: var(--hi-filter-tabs-items-display, flex);
            gap: var(--hi-filter-tabs-items-gap, 15px);
            height: var(--hi-filter-tabs-items-height, 100%);
            flex-wrap: var(--hi-filter-tabs-items-flex-wrap, nowrap);
            white-space: var(--hi-filter-tabs-items-white-space, nowrap);
            flex-direction: var(--hi-filter-tabs-items-flex-direction, row);
            width: var(--hi-filter-tabs-items-width, 100%);
            justify-content: var(--hi-filter-tabs-items-justify-content, flex-start);
        }

        &__item {
            gap: var(--hi-filter-tabs-item-gap, 2px);
            position: var(--hi-filter-tabs-item-position, relative);
            display: var(--hi-filter-tabs-item-display, flex);
            flex-direction: var(--hi-filter-tabs-items-flex-direction, row);
            align-items: var(--hi-filter-tabs-item-align-items, center);
            justify-content: var(--hi-filter-tabs-item-justify-content, center);
            transition: var(--hi-filter-tabs-item-transition, 100ms);
            flex-shrink: var(--hi-filter-tabs-item-flex-shrink, 0);
            background: var(--hi-filter-tabs-item-background, none);
            padding: var(--hi-filter-tabs-item-padding, 0 5px);
            flex: var(--hi-filter-tabs-item-flex, none);
            width: var(--hi-filter-tabs-item-width, auto);

            &__icon,
            &__text {
                position: relative;
                z-index: 5;
            }

            &__icon {
                color: var(--hi-filter-tabs-item-icon-color, inherit);
                font-size: var(--hi-filter-tabs-item-icon-font-size, 1.25em);
            }

            &--active {
                color: var(--hi-filter-tabs-active-color, var(--hi-theme-primary));
                font-size: var(--hi-filter-tabs-active-font-size);
                font-weight: var(--hi-filter-tabs-active-font-weight, 700);
                background: var(--hi-filter-tabs-item-active-background);

                .hi-filter-tabs__item__icon {
                    color: var(--hi-filter-tabs-item-active-icon-color);
                    font-size: var(--hi-filter-tabs-item-active-icon-font-size);
                }
            }
        }

        &__right {
            flex-shrink: var(--hi-filter-tabs-right-flex-shrink, 0);
            display: var(--hi-filter-tabs-right-display, flex);
            align-items: var(--hi-filter-tabs-right-align-items, center);
            font-size: var(--hi-filter-tabs-right-font-size, inherit);
            font-weight: var(--hi-filter-tabs-right-font-weight, inherit);
            color: var(--hi-filter-tabs-right-color, inherit);
            gap: var(--hi-filter-tabs-right-gap, 10px);
        }

        &--justify {
            .hi-filter-tabs__items {
                justify-content: var(--hi-filter-tabs-items-justify-content, space-between);
            }
        }

        &--equal {
            .hi-filter-tabs__item {
                flex: 1;
            }
        }
    }
</style>
